<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      /* 1.标签选择器--"覆盖面" 非常大，通常用于标签样式的初始化 */
      div {
        color: blue;
        font-size: 24px;
      }

      /* 2.id 选择器 选择具有特定 id 的元素，请写一个井号（＃）*/
      #div_2 {
        color: red;
      }

      /* 3.class 选择器 多个标签可以定义相同的类名
      同一个标签可以同时属于多个类，类名用空格隔开*/
      .div_3 {
        color: green;
      }

      .div_4 {
        font-size: 78px;
      }

      /* 4.* 通配符选择器 基本不用，对性能消耗过大*/
      * {
        margin-left: 50px;
      }
    </style>
  </head>
  <body>
    <div>class_1</div>
    <div id="div_2">class_2</div>
    <div class="div_3 div_4">class_3</div>
    <div class="div_3">class_4</div>
    <div>class_5</div>
    <div>class_6</div>
    <div>class_7</div>
    <div>class_8</div>
  </body>
</html>
